<template>
  <div class="todo-info">
    <span class="total">{{ total }} items left</span>
    <div class="tab">
      <a
        v-for="(state, index) in states"
        :key="index"
        class="btn primary border"
        :class="state == current ? 'current' : ''"
        @click="handleClick(state)"
      >
        {{ state }}
      </a>
    </div>
    <button 
      class="btn info" 
      @click="$emit('del')"
    >
    Clear Completed
    </button>
  </div>
</template>

<script>
export default {
  name: 'TodoInfo',
  props: {
    total: {
      type: Number,
    },
  },
  data() {
    return {
      states: ['all', 'active', 'completed'],
      current: 'all', // 保存当前状态
    }
  },
  methods: {
    handleClick(s) {
      this.current = s
      // 触发自定义事件: toggle
      this.$emit('toggle', s) // 'all' 'active' 'complete'
    },
  },
}
</script>

<style lang="stylus">
@import '~styles/theme.styl'
@import '~styles/mixins.styl'

.todo-info
  display: flex
  justify-content: space-between
  align-items: center
  height: 30px
  padding: 5px 10px
  border-top: 1px solid rgba(0, 0, 0, 0.1)
  .total
    color: $red
  .tab
    display: flex
    justify-content: space-between
    width: 200px
    .btn.primary.border
      primaryBorderBtn()
      &.current
        primaryBtn()
  .btn.info
    infoBtn()
</style>